<template>
  <div>
    <el-row :gutter="15" style="text-align: center;background:rgba(0,0,0,0)">
      <el-col :span="5" :offset="3" style="position:relative">
        <div class="section">
          <div class="box_">
            <span></span>
            <span></span>
            <span style="margin:0 0 0 36%"></span>
            <span style="margin:0 0 0 -36%"></span>
            <p class="title">活跃用人单位数</p>
            <div class="value" v-if="jz">{{CompaniesInNumber}}</div>
              <animae-jz class="value" v-if="!jz"></animae-jz>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="section">
          <div class="background-img">
            <div class="box_">
              <span></span>
              <span></span>
              <span style="margin:0 0 0 36%"></span>
              <span style="margin:0 0 0 -36%"></span>
              <p class="title">在招岗位数</p>
              <div class="value" v-if="jz2">{{RecruitmentNumber}}</div>
              <animae-jz class="value" v-if="!jz2"></animae-jz>
            </div>
          </div>
        </div>
        <!-- <div class="section">
          <div class="border-row"></div>
          <div class="border-col"></div>
          <p class="title">发布岗位数</p>
          <div class="value">{{RecruitmentNumber}}</div>
        </div>-->
      </el-col>
      <el-col :span="5">
        <div class="section">
          <!-- <div class="background-img"> -->
          <div class="box_">
            <span></span>
            <span></span>
            <span style="margin:0 0 0 36%"></span>
            <span style="margin:0 0 0 -36%"></span>
            <p class="title">活跃求职者数</p>
            <div class="value" v-if="jz3">{{JobSeekersNumber}}</div>
            <animae-jz class="value" v-if="!jz3"></animae-jz>
            <!-- </div> -->
          </div>
        </div>
        <!-- <div class="section">
          <div class="border-row"></div>
          <div class="border-col"></div>
          <p class="title">活跃求职者数</p>
          <div class="value">{{JobSeekersNumber}}</div>
        </div>-->
      </el-col>
	  <el-col :span="5">
	    <div class="section">
	      <!-- <div class="background-img"> -->
	      <div class="box_">
	        <span></span>
	        <span></span>
	        <span style="margin:0 0 0 36%"></span>
	        <span style="margin:0 0 0 -36%"></span>
	        <p class="title">累计当前登记求职者</p>
	        <div class="value" v-if="jz4">{{JobSeekersAll}}</div>
	        <animae-jz class="value" v-if="!jz4"></animae-jz>
	        <!-- </div> -->
	      </div>
	    </div>
	    <!-- <div class="section">
	      <div class="border-row"></div>
	      <div class="border-col"></div>
	      <p class="title">活跃求职者数</p>
	      <div class="value">{{JobSeekersNumber}}</div>
	    </div>-->
	  </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  get_TalentMonitor_CompaniesInNumber,
  get_TalentMonitor_RecruitmentNumber,
  get_TalentMonitor_JobSeekersNumber,
  getTotalStaff
} from "@/api/data";
export default {
  data() {
    return {
      CompaniesInNumber: null,
      RecruitmentNumber: null,
      JobSeekersNumber: null,
	  JobSeekersAll:null,
      jz:true,
      jz2:true,
      jz3:true,
	  jz4:true,
    };
  },
  props: ["dateProp"],
  computed: {
  	  dataAll1() {
  	  		return {
  	  			startDate: this.formatDate('2013-01-01', 'YYYY-MM-DD')
  	  		}
  	  	}
  },
  mounted() {
    this.$nextTick(_ => {
      this.init();
    });
  },
  methods: {
    init() {
      this.jz=false
      this.jz2=false
      this.jz3=false
	  this.jz4=false
      get_TalentMonitor_CompaniesInNumber(this.dateProp).then(
        ({ data: { data } }) => {
          this.jz=true
          this.CompaniesInNumber = data.number;
        }
      );
      get_TalentMonitor_RecruitmentNumber(this.dateProp).then(
        ({ data: { data } }) => {
           this.jz2=true
          this.RecruitmentNumber = data.number;
        }
      );
      get_TalentMonitor_JobSeekersNumber(this.dateProp).then(
        ({ data: { data } }) => {
          this.jz3=true
          this.JobSeekersNumber = data.number;
          this.$store.commit("UPDATE_SARLY", data.number);
        }
      );
	  getTotalStaff(this.dataAll1).then(
	    ({ data: { data } }) => {
	      this.jz4=true
	      this.JobSeekersAll = data;
	      this.$store.commit("UPDATE_SARLY", data);
	    }
	  );
      // this.addData();
    },
    addData() {
      var that = this;
      setTimeout(function() {
        that.CompaniesInNumber = Number(that.CompaniesInNumber) + 1;
        that.RecruitmentNumber = Number(that.RecruitmentNumber) + 1;
        that.JobSeekersNumber = Number(that.JobSeekersNumber) + 1;
		that.JobSeekersAll = Number(that.JobSeekersAll) + 1;

        that.addData();
      }, 5000);
    }
  }
};
</script>
<style lang="stylus" scoped>
.section {
  height: auto;
  min-height: auto;
  background: rgba(0, 0, 0, 0);

  .title {
    font-size: 12px;
  }

  .value {
    font-size: 24px;
    font-weight: bold;
    margin-top: 5px;
  }
}
.el-col-offset-3 {
    margin-left: 8.5%;
}
</style>